<template>
  <div class="map_tool-wrap" :style="styleValue">
    <el-space v-bind="$attrs">
      <slot name="default"></slot>
    </el-space>
  </div>
</template>

<script lang="ts" setup>
import { CSSProperties, computed } from 'vue';

defineOptions({
  name: 'ToolWrap',
});

const props = defineProps({
  position: {
    type: String,
    default: 'top-right',
    validator: (value: string) => {
      return ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(value);
    },
  },
});

const styleValue = computed<CSSProperties>(() => {
  return {
    position: 'absolute',
    // zIndex: 100,
    ...(props.position.includes('top') ? { top: '20px' } : { bottom: '20px' }),
    ...(props.position.includes('left') ? { left: '20px' } : { right: '20px' }),
  };
});
</script>
